import 'package:flutter/material.dart';
import 'package:online_study/base/PlatformUtils.dart';
import 'package:online_study/theme/colors.dart';
import 'package:online_study/theme/size.dart';
import 'package:universal_html/html.dart' as html;
import 'package:universal_ui/universal_ui.dart';
import 'package:webview_flutter/webview_flutter.dart';

//课程简介
class CourseIntroductionPage extends StatefulWidget {
  @override
  _CourseIntroductionState createState() => _CourseIntroductionState();
}

class _CourseIntroductionState extends State<CourseIntroductionPage>
    with AutomaticKeepAliveClientMixin {
  @override
  void initState() {
    super.initState();
    if (PlatformUtils.isWeb) {
      ui.platformViewRegistry.registerViewFactory(
          'introduction-html',
          (int viewId) => html.IFrameElement()
            ..style.border = 'none'
            ..src = 'https://flutterchina.club/');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [_buildTop(), _buildBottom()],
    );
  }

  Widget _buildTop() {
    return Row(
      children: [
        Expanded(
            child: Container(
              padding: EdgeInsets.only(left: ThemeSize.width19),
              height: ThemeSize.height102,
              color: ThemeColor.colorWhite,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("为帮助新员工快速熟悉企业文化，融入团队，拟定于2021年3月举行线上第2期新员工入职培训。",
                      style: TextStyle(
                          color: ThemeColor.color333333, fontSize: ThemeSize.sp13)),
                  Container(
                    width: double.infinity,
                    margin: EdgeInsets.only(top: ThemeSize.height18),
                    child: Text("已学习：122人",
                        style: TextStyle(
                            color: ThemeColor.color555555,
                            fontSize: ThemeSize.sp10)),
                  )
                ],
              ),
            )),
        Container(
          height: ThemeSize.height102,
          color: ThemeColor.colorWhite,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                width: ThemeSize.height26,
                height: ThemeSize.height26,
                child: Icon(Icons.star, color: ThemeColor.color1485EE),
              ),
              Container(
                height: ThemeSize.height26,
                width: ThemeSize.width75,
                alignment: Alignment.center,
                margin: EdgeInsets.only(top: ThemeSize.height20),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(ThemeSize.height14),
                      bottomLeft: Radius.circular(ThemeSize.height14)),
                  color: ThemeColor.colorFA5151,
                ),
                child: Text("商务谈判专题",
                    style: TextStyle(
                        color: ThemeColor.colorWhite,
                        fontSize: ThemeSize.sp10)),
              )
            ],
          ),
        )
      ],
    );
  }

  Widget _buildBottom() {
    return Expanded(
      child: Container(
        height: double.infinity,
        margin: EdgeInsets.only(top: ThemeSize.height6),
        child: PlatformUtils.isWeb
            ? HtmlElementView(
                viewType: 'introduction-html',
              )
            : WebView(initialUrl: "https://flutterchina.club/"),
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}
